<template>
    <div class="group-box">
        <div v-if="tplShow">
            <el-radio-group v-model="currentTplLs" class="flex_row" :disabled="disabled">
                <div v-for="option in layoutOptions" :key="option.value" class="pl-box flex_row"
                    @click="handleChangeTplOrsort(option.value)">
                    <img :src="option.icon" />
                    <span :class="{ 'active-text': isOptionActive(currentTplLs, option.value) }">
                        {{ option.label }}
                    </span>
                    <el-radio :label="option.value"></el-radio>
                </div>
            </el-radio-group>
        </div>
        <div v-if="sortShow">
            <el-radio-group v-model="currentSortType" class="flex_row" :disabled="disabled">
                <div v-for="option in sortOptions" :key="option.value" class="pl-box"
                    @click="handleChangeTplOrsort(option.value)">
                    <div class="txt-box">
                        <img :src="option.icon" />
                        <span :class="{ 'active-text': isOptionActive(currentSortType, option.value) }">
                            {{ option.label }}
                        </span>
                    </div>
                    <el-radio :label="option.value"></el-radio>
                </div>
            </el-radio-group>
        </div>
    </div>
</template>

<script setup>

import { ref, watch, computed, defineProps, defineEmits } from '@vue/composition-api';
import iconlb2 from "@/static/images/icon-lb-2.png"
import iconbl2 from "@/static/images/icon-bl-2.png"
import iconcd from "@/static/images/icon-cd.png"
import iconsx from "@/static/images/icon-sx.png"
import iconjx from "@/static/images/icon-jx.png"

const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    },
    sortShow: {
        type: Boolean,
        default: false
    },
    sort_type: {
        type: [String, Number],
        default: '',
    },
    tplShow: {
        type: Boolean,
        default: false
    },
    tpl_ls: {
        type: [String, Number],
        default: '',
    },
});

const currentTplLs = ref(null)
const currentSortType = ref(null)

watch(() => props.tpl_ls, (newVal) => {
    if (newVal) {
        currentTplLs.value = newVal
    }
}, { deep: true, immediate: true })

watch(() => props.sort_type, (newVal) => {
    if (newVal) {
        currentSortType.value = newVal
    }
}, { deep: true, immediate: true })

const handleChangeTplOrsort = (value) => {
    if (props.disabled) return
    if (props.tplShow) {
        currentTplLs.value = value
        emit('changeTplOrsort',{ tpl_ls:value})
    } else if (props.sortShow) {
        currentSortType.value = value
        emit('changeTplOrsort',{ sort_type:value})
    }
}

const emit = defineEmits(['changeTplOrsort'])

// 排列方式配置
const layoutOptions = ref([
    {
        label: '列表展示',
        value: '1',
        icon: iconlb2
    },
    {
        label: '并列展示',
        value: '2',
        icon: iconbl2
    }
])

// 排序方式配置
const sortOptions = ref([
    {
        label: '按默认添加时间',
        value: '1',
        icon: iconcd
    },
    {
        label: '价格从低到高',
        value: '3',
        icon: iconjx
    },
    {
        label: '价格从高到低',
        value: '2',
        icon: iconsx
    }
])

// 通用函数：检查选项是否激活
const isOptionActive = (currentValue, optionValue) => {
    return currentValue === optionValue
}

</script>

<style lang="scss" scoped>
.group-box .pl-box {
    font-size: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 8px;
    padding: 6px 10px;
    background: #ffffff;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;

    &:hover {
        background: #f8fafc;
        border-color: #3b82f6;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    span {
        margin-right: 6px;
        color: #374151;
        font-weight: 500;

        &.active-text {
            color: #459ffd;
        }
    }

    img {
        margin-right: 6px;
        width: 16px;
        height: 16px;
    }

    .txt-box {
        display: flex;
        align-items: center;
    }
}

.active-box ::v-deep .el-radio-group {
    height: auto !important;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.active-box ::v-deep .el-radio__label {
    display: none;
}

.active-box ::v-deep .el-radio__input.is-checked .el-radio__inner {
    background-color: #3b82f6;
    border-color: #3b82f6;
}



</style>